<template>
  <div class="upload">
      <div class="preview">
          <img v-for="(item,idx) in imgList" :src="item" :key="idx" alt="" srcset="">
              <label for="files" class="add"><i class="iconfont icon-icontianjiatupian"></i></label>
      </div>
      <input id="files" type="file" @change="loadImg" accept="image/png,image/gif,image/jpeg" v-show="false">
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgList: [],
      selectFiles: []
    };
  },
  props: {
    value: {
      type: Array,
      required: true
    }
  },
  components: {},

  computed: {},

  methods: {
    loadImg(e){
      const f = new FileReader()
      f.readAsDataURL(e.target.files[0])
      this.selectFiles.push(e.target.files[0])
      f.onload = () => {
        this.imgList.push(f.result)
        this.$emit("input",this.selectFiles)
      }
    }
  }
}

</script>
<style scoped>
    .preview{
        display: flex;
        flex-wrap: wrap;
    }
    
    .preview> img ,.preview > .add{
        width: 100px;
        height: 100px;
        box-sizing: border-box;
        margin-bottom:10px; 
        margin-right: 10px;

    }

    .preview > .add{
        border: 1px dashed #D2D2D2;
        color: #D2D2D2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .icon-icontianjiatupian {
        font-size: 40px;
    }
</style>